import { PropType, defineComponent } from 'vue';

// Utils
import { createNamespace } from '../utils';



const [name, bem] = createNamespace('card');

export type cardHeaderType = 'line' | 'block';

export default defineComponent({
  name,

  props: {
    title: String,
    headerType: {
      type: String as PropType<cardHeaderType>,
      default: "line"
    },
    inset: Boolean
  },

  emits: ['click-thumb'],

  setup(props, { slots, emit }) {

    const renderTitle = () => {
      let _html = false, _title = null;
      if (slots.title) {
        _html = true
        _title = slots.title()
      }

      if (props.title) {
        _html = true
        _title = props.title
      }

      if (_html) {
        return (
          <div class={bem('header', props.headerType)}>
            <div class={[bem('title')]}>
              {_title}
            </div>
          </div>
        );
      }
    };

    const renderFooter = () => {
      if (slots.footer) {
        return (
          <div class={bem('footer')}>
            {slots.footer()}
          </div>
        );
      }
    }

    return () => {
      return (
        <div class={bem({ inset: props.inset })}>
          {renderTitle()}
          <div class={bem('content')}>
            {slots.default?.()}
          </div>
          {renderFooter()}
        </div>
      );
    }
  },
});
